<template>
  <div class="address-container">
    <div class="address-card" @click="changeAddress">
      <div class="address-content">
        <p>
          <strong>姓名:</strong>
          {{ address.name }}
        </p>
        <p>
          <strong>联系方式:</strong>
          {{ address.phone }}
        </p>
        <p>
          <strong>地址:</strong>
          {{ address.address }}
        </p>
        <el-icon @click.stop="dialogVisible = true" class="edit-icon">
          <EditPen />
        </el-icon>
      </div>
    </div>
  </div>
  <!-- 编辑对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="编辑地址"
    width="30%"
    custom-class="address-edit-dialog"
    :before-close="closeDialog"
    draggable
    destroy-on-close
  >
    <div class="dialog-content">
      <el-form label-width="auto" style="width: 350px" :model="edit" :rules="rules">
        <!-- 收货人名称 -->
        <el-form-item label="收货人名称" prop="name">
          <el-input
            v-model="edit.name"
            placeholder="在这里填写收货人的名称"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <!-- 设置预留电话 -->
        <el-form-item label="预留电话" prop="phone">
          <el-input
            v-model="edit.phone"
            placeholder="在这里填写预留电话"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <!-- 设置收获地址 -->
        <el-form-item label="收货地址" prop="address">
          <el-input
            v-model="edit.address"
            placeholder="在这里填写收货地址"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveAddress">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { updateAddress } from '@/api/shop'
import { startLoading, stopLoading } from '@/utils/loading'
import { ref } from 'vue'
import { ElNotification } from 'element-plus'

// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
    { min: 1, max: 10, message: '标题字数为1~20字之间', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入正确的手机号', trigger: 'blur' },
    {
      pattern: /^\+?[1-9]\d{1,14}(\(\d{1,3}\)|\s?\d{1,3})?[-.\s]?\d{1,14}$/,
      message: '请按照正确的格式输入手机号',
      trigger: 'blur',
    },
  ],
  address: [
    { required: true, message: '请输入正文内容', trigger: 'blur' },
    { min: 1, max: 100, message: '标题字数为1~500字之间', trigger: 'blur' },
  ],
}

const props = defineProps({
  obj: Object,
})

const emit = defineEmits(['close', 'change'])

// 定义收货地址数据
const address = ref(props.obj)

// 实际修改数据
const edit = ref({ ...address.value })

// 控制对话框的显示状态
const dialogVisible = ref(false)

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
}

// 切换地址
const changeAddress = () => {
  emit('change', address.value.address)
}

// 更新子组件地址
const updateOldAddress = (value) => {
  edit.value = value
  address.value = value
}

// 更新地址
const saveAddress = async () => {
  startLoading()
  const res = (
    await updateAddress({ id: address.value.id, userId: address.value.userId, ...edit.value })
  ).data
  stopLoading()
  if (res.success) {
    ElNotification({
      title: '成功',
      message: '修改收货地址信息成功',
      type: 'success',
    })
    closeDialog()
    emit('close', { id: address.value.id, fn: updateOldAddress })
  } else {
    ElNotification({
      title: '错误',
      message: '修改收货地址信息失败',
      type: 'error',
    })
  }
}
</script>

<style scoped less="scss">
.address-container {
  width: 100%;
  padding: 20px;
  cursor: pointer;

  h2 {
    margin-bottom: 20px;
  }
}

.address-card {
  position: relative;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s,
    box-shadow 0.3s;

  &:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.11);
  }

  .address-content {
    position: relative;

    p {
      margin: 10px 0;

      strong {
        font-weight: bold;
      }
    }

    .edit-icon {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      cursor: pointer;
      color: #333;
    }
  }
}

.address-edit-dialog {
  .el-message-box__header {
    text-align: center;
  }

  .el-message-box__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .dialog-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .input-group {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        label {
          width: 80px;
        }

        input {
          flex: 1;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      }
    }
  }

  .el-message-box__btns {
    display: flex;
    justify-content: space-between;
  }
}
</style>
